<template>
	<view class="container">
		<view class="serch">
			<navigator url="/pages/index/location/location">
				<image src="../../static/image/定位2@2x.png"></image>
				<view>
					<text>焦作市山阳区人民路32号</text>
				</view>
			</navigator>
			<image src="../../static/image/刷新 (1).png" @tap="refreshLocation"></image>
			<text @tap="refreshLocation">刷新</text>
		</view>
		<uni-grid class="grids" :showBorder="false" :column="4" :highlight="true" @change="change">
			<navigator class="grid" url="/pages/vehicleRepairNearbyStores/vehicleRepairNearbyStores">
				<view class="grid-item-box" style="background-color: #fff;">
					<image src="../../static/image/车辆维修1-01@2x.png"></image>
				</view>
				<text>车辆维修</text>
			</navigator>
			<navigator class="grid" url="/pages/carMaintenanceNearbyStores/carMaintenanceNearbyStores">
				<view class="grid-item-box" style="background-color: #fff;">
					<image src="../../static/image/车辆维修1-01@2x.png"></image>
				</view>
				<text>汽车保养</text>
			</navigator>
			<navigator class="grid" url="/pages/professionalCarWash/professionalCarWash">
				<view class="grid-item-box" style="background-color: #fff;">
					<image src="../../static/image/车辆维修1-01@2x.png"></image>
				</view>
				<text>专业洗车</text>
			</navigator>
			<navigator class="grid" url="../../pages/refuelNearby/refuelNearby">
				<view class="grid-item-box" style="background-color: #fff;">
					<image src="../../static/image/车辆维修1-01@2x.png"></image>
				</view>
				<text>就近加油</text>
			</navigator>
		</uni-grid>
		<button @click="getMessage">点我</button>
		<view class="fujinjiayouzhan">
			<view>
				<text>附近加油站</text>
			</view>
			<navigator url="/pages/refuelNearby/refuelNearby">
				<text>全部</text>
				<uni-icons style="float: right; margin-right: -100rpx; color: #1d8aff;" type="right"
					size="20"></uni-icons>
			</navigator>
		</view>
		<view class="map">
			<template>
				<view>
					<view class="page-body">
						<view class="page-section page-section-gap">
							<map style="width: 100vw; height: 300px;" :latitude="latitude" :longitude="longitude"
								:markers="covers">
							</map>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="fujinjiayouzhan">
			<view>
				<text>优惠团购</text>
			</view>
			<navigator url="/pages/discount/discount">
				<text>更多</text>
				<uni-icons style="float: right; margin-right: -100rpx; color: #1d8aff;" type="right"
					size="20"></uni-icons>
			</navigator>
		</view>
		<view class="tuangoulist">
			<navigator url="/pages/discountDetails/discountDetails">
				<image
					src="https://th.bing.com/th/id/R.47885c43b93607a4d051b95e3b552a8f?rik=T2OiKfk3I34ocA&pid=ImgRaw&r=0">
				</image>
				<text>故宫四日追花拍摄秘籍—故宫</text>
			</navigator>
			<navigator url="/pages/discountDetails/discountDetails">
				<image
					src="https://th.bing.com/th/id/R.47885c43b93607a4d051b95e3b552a8f?rik=T2OiKfk3I34ocA&pid=ImgRaw&r=0">
				</image>
				<text>故宫四日追花拍摄秘籍—故宫</text>
			</navigator>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
			}
		},
		methods: {
			refreshLocation() {
				// 在这里添加刷新逻辑
				console.log('刷新位置');
			},
			getIdentityInfo() {
				uni.request({
					url: 'http://localhost:8080/user/identityVerification/list',
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					method: 'GET',
					data: {
						uid: uni.getStorageSync('userInfo').id
					},
					success(res) {
						if (res.data.total == 0) {
							uni.showToast({
								title: '请完善实名认证信息',
								icon: 'none',
								duration: 2000
							})
						} else if (res.data.code == 200) {
							uni.setStorageSync('identity', res.data.rows[0])
						}
					}
				})
			},
			// --------------
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: "ws://localhost:11111/ws/1",
					success(data) {
						console.log("websocket连接成功");
					},
				});

				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},
			getUserLocation() {
			      uni.authorize({
			        scope: 'scope.userLocation',
			        success: () => {
			          wx.getLocation({
			            type: 'wgs84',
			            success: (res) => {
			              this.location = {
			                latitude: res.latitude,
			                longitude: res.longitude,
			              };
			            },
			            fail: (err) => {
			              console.error('获取位置失败:', err);
			              uni.showToast({
			                title: '获取位置失败',
			                icon: 'none',
			              });
			            }
			          });
			        },
			        fail: () => {
			          uni.showToast({
			            title: '权限未授权',
			            icon: 'none',
			          });
			        }
			      });
			    }
			// --------------
		},
		onLoad() {
			this.refreshLocation()
			this.getIdentityInfo()
			// this.connectSocketInit()
			// this.getLocation()
			this.getUserLocation()
		}
	}
</script>

<style>
	.container {
		padding: 40rpx;
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.serch {
		width: 680rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.serch navigator {
		height: 40rpx;
		width: 550rpx;
		display: flex;
		align-items: center;
	}

	.serch navigator text {
		font-weight: bold;
		margin-left: 15rpx;
	}

	.serch image {
		height: 30rpx;
		width: 30rpx;
	}

	.serch image:first-child {
		color: black;
	}

	.serch>text {
		margin-left: 10rpx;
		color: #2e7ff4;
		font-weight: bold;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		width: 150rpx;
		height: 80rpx;
		border-radius: 38%;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 4px 8px rgba(0, 128, 0, 0.18);
	}

	.grid-item-box>image {
		height: 80rpx;
		width: 100rpx;
	}

	.grid>text {
		margin-left: 16rpx;
		font-weight: bold;
	}

	.grids navigator:nth-child(2) {
		margin-left: 23rpx;
	}

	.grids navigator:nth-child(3) {
		margin-left: 23rpx;
	}

	.grids navigator:nth-child(4) {
		margin-left: 23rpx;
	}

	.fujinjiayouzhan {
		margin-top: 25rpx;
	}

	.fujinjiayouzhan>view>text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.fujinjiayouzhan>view:nth-child(2)>text {
		color: #1d8aff;
		float: right;
		margin-right: 45rpx;
	}

	.fujinjiayouzhan>view {
		display: inline;
	}

	.fujinjiayouzhan>navigator>text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.fujinjiayouzhan>navigator:nth-child(2)>text {
		color: #1d8aff;
		float: right;
		margin-right: 45rpx;
	}

	.fujinjiayouzhan>navigator {
		display: inline;
	}

	.tuangoulist {
		margin-top: 20rpx;
	}

	.tuangoulist>navigator {
		width: 320rpx;
		display: inline-block;
	}

	.tuangoulist>navigator:nth-child(even) {
		width: 320rpx;
		display: inline-block;
		margin-left: 18rpx;
	}


	.tuangoulist>navigator>image {
		width: 320rpx;
		height: 200rpx;
	}

	.tuangoulist>navigator>text {
		font-weight: bold;
		position: relative;
		top: -16rpx;
		/* 上移 10rpx */
	}

	.map {
		margin-top: 20rpx;
		width: 100vh;
		margin-left: -40rpx;
	}
</style>